<template>
  <div class="content_box">
    <div class="msg_box">
      <div class="box">
        <p class="title">套餐名称</p>
        <p class="price">
          <input v-model.trim="formData.thaliName" type="text" placeholder="请输入套餐名称">
        </p>
      </div>
      <div class="box">
        <p class="title">价格</p>
        <p class="price">
          <input v-model.trim="formData.price" type="text" placeholder="请输入价格">
        </p>
      </div>
      <div class="box">
        <p class="title">小时数</p>
        <p class="price">
          <input v-model.trim="formData.hours" type="text" placeholder="请输入小时数">
        </p>
      </div>
      <div class="box" style="height: 150rpx;">
        <p class="title">套餐限制</p>
        <van-radio-group v-model="formData.curtail" @change="changeRoomIlk">
          <van-radio :name="0">默认</van-radio>
          <van-radio :name="1">早晚场</van-radio>
        </van-radio-group>
      </div>
      <div class="box" v-if="formData.curtail">
        <p class="title">开始时间</p>
        <p class="price" @click="changeTime('start')">{{ formData.startHms }}</p>
      </div>
      <div class="box" v-if="formData.curtail">
        <p class="title">结束时间</p>
        <p class="price" @click="changeTime('end')">{{ formData.endHms }}</p>
      </div>
    </div>
    <van-popup
      :show="isPopShow"
      position="bottom"
      round
      bind:close="onClose">
      <van-datetime-picker
        @cancel="isPopShow = false"
        type="time"
        :value="currentDate"
        :min-hour="minHour"
        :max-hour="maxHour"
        @confirm="onConfirm"
      />
    </van-popup>
    <div class="anniu_box">
      <van-button 
        @click="submit"
        :disabled="loading"
        :loading="loading" 
        :loading-text="formData.id?'修改中...':'新增中...'"
        type="primary"
        color="#3d98f7"
        custom-style="box-shadow: 0rpx 10rpx 20rpx #CEDBFA;border:none;width: 100%;height: 88rpx;line-height: 88rpx;background: #1E68FF;border-radius: 100rpx;text-align: center;color: #fff;font-size: 30rpx;"
      >{{formData.id?'立即修改':'立即新增'}}</van-button>
    </div>
  </div>
</template>
 
<script>
import { mapState } from 'vuex'
import {
  addRoomThali,
  updateRoomThali,
  getRoomThali
} from "@/api/index";
export default {
  components: {},
  data() {
    return {
      formData:{
        hours:'',
        price:'',
        thaliName:'',
        roomId:'',
        curtail: 0,
        startHms:'',
        endHms:''
      },
      currentDate: '12:30', // 默认时间
      minHour: 0,
      maxHour: 23,
      isPopShow:false,
      loading:false,
      str:''
    };
  },
  onShow() {
    this.formData.curtail = 0
  },
  computed: {
    ...mapState({
      storeId: state => state.user.storeId
    })
  },
  methods: {

    onConfirm(e){
      console.log(e)
      if (this.str === 'start') {
        this.formData.startHms = e.mp.detail+':00'
      } else {
        this.formData.endHms = e.mp.detail+':00'
      }
      this.isPopShow = false
    },

    changeTime(str) {
      this.str = str
      this.isPopShow = true
    },

    changeRoomIlk(e){
      console.log(e)
      this.formData.curtail = +e.mp.detail
    },

    // 回显
    getHuixian(id){
      this.$showLoading('加载中...')
      getRoomThali({id}).then(res=>{
        if(res.statusCode == '00000'){
          this.formData = res.data
          wx.hideLoading()
        }else{
          wx.hideLoading()
        }
      })
    },

    // 提交
    submit(){
      if(!this.formData.thaliName){
        this.$toast('请输入套餐名称')
        return
      }
      if(!this.formData.price){
        this.$toast('请输入价格')
        return
      }
      if(!this.formData.hours){
        this.$toast('请输入小时数')
        return
      }
      this.formData.storeId = this.storeId
      this.$showLoading(this.formData.id?'修改中...':'新增中...')
      this.loading = true
      let returnData = this.formData.id?updateRoomThali(this.formData):addRoomThali(this.formData)
      returnData.then(res=>{
        if(res.statusCode == '00000'){
          this.loading = false
          wx.navigateBack({
            delta: 1
          });
          wx.hideLoading()
          this.$toast(this.formData.id?'修改成功':'新增成功')
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

  },
  onHide() {},
  onLoad(options) {
    this.formData.roomId = options.roomId
    if(options.id){
      this.formData.id = options.id
      this.getHuixian(options.id)
    }else{
      delete this.formData.id
    }
  },
  onUnload() {
    this.formData = {
      hours:'',
      price:'',
      thaliName:'',
    }
  },
};
</script>

<style lang="scss" scoped>
.msg_box{
  margin:0 30rpx;
  .box{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:28rpx;
    color:#222;
    border-bottom:1px solid #f5f5f5;
    .title{
      font-weight: 500;
      display: flex;
      align-items: center;
      span{
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        background: #1E68FF;
        border-radius: 50%;
        color:#fff;
        text-align: center;
        font-size:24rpx;
        margin-left:20rpx;
      }
    }
    .price{
      flex: 1;
      height: 100%;
      text-align: right;
      line-height: 100rpx;
      input{
        text-align: right;
        margin-right:20rpx;
        height: 100rpx;
        flex: 1;
      }
    }
    .yj{
      display: flex;
      align-items: center;
      p{
        width: 140rpx;
        padding:8rpx 0;
        background: #F1F3F4;
        border-radius: 10rpx;
        font-size:28rpx;
        margin-right:30rpx;
        text-align: center;
      }
      .on{
        background: #1E68FF;
        color:#fff;
      }
      input{
        text-align: right;
        margin-right:20rpx;
        font-size:28rpx;
      }
      span{
        font-size:28rpx;
      }
    }
  }
}
.anniu_box{
  margin:50rpx 30rpx;
}
</style>
